<template>
	<view class="">
		<view class="header">
			<view class="basj">
				<image @click="gobacks" src="/static/dazi/bak.png" mode=""></image>
				<text class="title">设置</text>
			</view>
		</view>
		<view class="act">
			<image src="/static/assets7/9f431f2a3fc9b9170fe26530ee35fd59.png" mode=""></image>
		</view>
		<view class="mans">
			<view class="rojs ase">
				<view class="lea">
					昵称
				</view>
				<view class="dise" @click="gonick">
					<text class="nams">名字</text>
					<image class="rihse" src="/static/assets7/b5b91eddf88856dd6f98eb78a1d31772.png" />
				</view>

			</view>
			<view class="rojs ">
				<view class="lea">
					注册时间
				</view>
				<view class="risnhe">
					2025/2/5 12:52:35
				</view>
			</view>
		</view>
		<view class="mans" style="margin: 30rpx 0;">
			<view class="rojs " @click="gosage">
				<view class="lea">
					安全设置
				</view>
				<image class="rihse" src="/static/assets7/b5b91eddf88856dd6f98eb78a1d31772.png" />
			</view>

		</view>
		<view class="mans">
			<view class="rojs ase" @click="golang" >
				<view class="lea">
					语言
				</view>
				<image class="rihse" src="/static/assets7/b5b91eddf88856dd6f98eb78a1d31772.png" />
			</view>
			<view class="rojs ase"  @click="gofanyi" >
				<view class="lea">
					实时翻译
				</view>
				<image class="rihse" src="/static/assets7/b5b91eddf88856dd6f98eb78a1d31772.png" />
			</view>
		</view>
		<view class="mans" style="margin-top: 30rpx;">
			<view class="rojs ase"  @click="golpol(0)" >
				<view class="lea">
					隐私政策
				</view>
				<image class="rihse" src="/static/assets7/b5b91eddf88856dd6f98eb78a1d31772.png" />
			</view>
			<view class="rojs ase" @click="golpol(1)">
				<view class="lea">
					服务协议
				</view>
				<image class="rihse" src="/static/assets7/b5b91eddf88856dd6f98eb78a1d31772.png" />
			</view>
		</view>

		<view class="btsh">
			退出账号
		</view>

		<up-overlay :show="show" @click="show = false"
			style="display: flex;align-items: center;justify-content: center;">
			<view class="pouper" @tap.stop>

				<view class="rosh">
					<image @click="show = false" src="/static/dazi/clos.png" mode=""></image>
				</view>
				<view class="shudcode">
					修改昵称
				</view>

				<view class="iosld">
					<input type="text" placeholder="请输入昵称" placeholder-class="co" v-model="memu" />

				</view>


				<view class="busnd btnact ash" @click="entmemn">
					确认
				</view>



			</view>
		</up-overlay>


	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				show: false,

			};
		},

		methods: {
			// 隐私政策   服务协议
			golpol(i){
			uni.navigateTo({
				url:'/pages/set/policy?type='+i
			})	
			},
			// 语言
			golang(){
				uni.navigateTo({
					url:'/pages/set/langes'
				})
			},
			// 翻译
			gofanyi(){
			uni.navigateTo({
				url:'/pages/set/inter'
			})	
			},
			// 安全设置
			gosage() {
				uni.navigateTo({
					url: '/pages/set/secure'
				})
			},
		
			gonick() {
				this.show = true
			},
			gobacks() {

				// #ifdef H5
				history.back();
				// #endif

				// #ifdef APP
				uni.navigateBack()
				// #endif

			},
		},
	};
</script>

<style scoped lang="scss">
	.btnact2 {
		background-color: #2a222f !important;
		color: #fff !important;
	}

	.btnact {
		background-color: #fb75d6 !important;
	}

	.ash {
		margin-top: 30rpx !important;
	}

	.busnd {
		margin: 100rpx 0 30rpx;
		background-color: rgba(255, 154, 233, 0.4);
		height: 110rpx;
		text-align: center;
		line-height: 110rpx;
		border-radius: 100rpx;
		color: #fff;
		font-size: 32rpx;
	}

	.u-transition {
		backdrop-filter: blur(3px);
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) -30%, rgba(255, 255, 255, 0) 50%);

	}

	.shudcode {
		color: 32rpx;
		font-size: 32rpx;
		text-align: center;
		color: #2A222F;
	}

	.co {
		color: rgba(195, 176, 195, 1);
		font-size: 28rpx;
	}

	.iosld {
		margin: 50rpx 0;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;

		input {
			margin-right: 20rpx;
			padding: 0 20rpx;
			height: 100rpx;
			border: 1px solid rgba(237, 229, 237, 1);
			border-radius: 30rpx;

		}

		.ksbq {
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			image {
				border: 1px solid #ccc;
				width: 240rpx;
				height: 100rpx;
			}

			.tsye {
				margin: 20rpx 0;
				color: rgba(251, 117, 214, 1);
				font-size: 24rpx;
			}
		}

	}

	.pouper {
		background-color: #fff;
		width: 600rpx;

		padding: 30rpx;
		border-radius: 30rpx;
	}

	.rosh {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.isehd {
		height: 32rpx;
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.seacus {
		display: flex;
		align-items: center;
	}

	.btsh {
		margin: 120rpx 0 60rpx;
		color: #2A222F;
		font-size: 28rpx;
		height: 110rpx;
		background-color: #FFFFFF;
		border-radius: 32rpx;
		text-align: center;
		line-height: 110rpx;
	}

	.risnhe {
		color: #837487;
		font-size: 28rpx;
	}

	.dise {
		display: flex;
		align-items: center;
	}

	.nams {
		color: #837487;
		font-size: 24rpx;
	}

	.act {
		margin: 60rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 160rpx;
			height: 160rpx;
			vertical-align: middle;
		}
	}

	.basj {
		display: flex;
		align-items: center;
		height: 60rpx;

		image {
			width: 48rpx;
			height: 48rpx;
			vertical-align: middle;
		}

		.title {
			margin-left: 10rpx;
			color: #2A222F;
			font-size: 40rpx;
		}
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;

		letter-spacing: 2rpx;
		/* 字母间距 */
		font-weight: 600;
		// border: #dddddd solid 1px;

		.btn-side {
			position: absolute;
			line-height: 60rpx;
			font-size: 28rpx;
			cursor: pointer;

			&.right {
				right: 30rpx;
			}
		}
	}

	.fksw {
		display: flex;
		align-items: center;
	}

	.mans {
		background-color: #ffffff;
		border-radius: 32rpx;
	}

	.ase {
		border-bottom: 1px solid #f8eff9;
	}

	.rojs {

		display: flex;
		align-items: center;
		padding: 40rpx 32rpx;


		justify-content: space-between;
	}

	.lea {

		color: #2A222F;
		font-size: 28rpx;
	}

	.rihse {
		width: 32rpx;
		height: 32rpx;
	}

	// .pos_5{
	// 	 :nth-child(1){
	// 		border-radius: 0 0 32rpx 32rpx !important;
	// 	}
	// }
	page {
		padding: 30rpx;
		background-color: #f7eff8;
		overflow: hidden;
		background-image: url('/static/assets7/e9cd3fc4ee4eabc1262262a469ab1c21.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.section {
			background-image: url('/static/assets7/e9cd3fc4ee4eabc1262262a469ab1c21.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 750rpx;
			height: 1624rpx;
		}

		.image {
			width: 48rpx;
			height: 48rpx;
		}

		.pos {
			position: absolute;
			left: 40rpx;
			top: 112rpx;
		}

		.text {
			color: #2a222f;
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: 700;
			line-height: 36.64rpx;
		}

		.pos_2 {
			position: absolute;
			left: 113.64rpx;
			top: 117.72rpx;
		}

		.image_2 {
			border-radius: 80rpx;
			width: 160rpx;
			height: 160rpx;
		}

		.pos_3 {
			position: absolute;
			left: 50%;
			top: 216rpx;
			transform: translateX(-50%);
		}

		.section_2 {
			margin-top: 24rpx;
			background-color: #ffffff;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			height: 112rpx;

			.group {
				margin: 0 32rpx;
				padding: 40rpx 4rpx;
				border-bottom: solid 2rpx #f7eff8;

				.group_2 {
					margin-right: 8rpx;

					.image_3 {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}

		.view {
			margin-top: 0;
		}

		.pos_4 {
			position: absolute;
			left: 40rpx;
			right: 40rpx;
			top: 424rpx;
		}

		.pos_5 {
			position: absolute;
			left: 40rpx;
			right: 40rpx;
			top: 536rpx;

			.list-item {
				// margin: 15rpx 0;
				margin-bottom: 20rpx;
				padding: 40rpx 32rpx;
				background-color: #ffffff;
				border-radius: 32rpx;

				.text_2 {
					line-height: 25.96rpx;
					color: #2A222F !important;
				}

				.text_3 {
					line-height: 25.76rpx;
				}
			}
		}

		.font {
			font-size: 28rpx;
			font-family: PingFang SC;
			line-height: 25.88rpx;
			color: #2a222f;
		}

		.font_2 {
			font-size: 28rpx;
			font-family: PingFang SC;
			line-height: 25.88rpx;
			color: #837386;
		}

		.section_3 {
			background-color: #ffffff;
			border-radius: 32rpx;
			width: 670rpx;
			height: 112rpx;
		}

		.pos_6 {
			position: absolute;
			left: 40rpx;
			right: 40rpx;
			top: 1404rpx;
		}

		.section_4 {
			padding: 16rpx 0;
			background-color: #ffffff;
			border-radius: 48rpx 48rpx 0rpx 0rpx;
			box-shadow: 0rpx 2rpx 2rpx #ffffff99 inset;

			.text-wrapper {
				margin-right: 38rpx;
				padding: 36rpx 0;
				background-color: #f7eff8;
				border-radius: 48rpx;
				width: 216rpx;

				.text_9 {
					margin-right: 52rpx;
					color: #fb75d6;
					font-weight: 700;
					line-height: 25.62rpx;
				}
			}

			.equal-division {
				position: absolute;
				left: 88rpx;
				top: 50%;
				transform: translateY(-50%);
			}

			.group_4 {
				width: 507rpx;
			}
		}

		.pos_7 {
			position: absolute;
			left: 0;
			right: 0;
			top: 1428rpx;
		}

		.section_5 {
			background-color: #ffffff;
			width: 750rpx;
			height: 68rpx;
		}

		.pos_8 {
			position: absolute;
			left: 0;
			right: 0;
			top: 1556rpx;
		}
	}
</style>